import React from 'react';
import {Link ,NavLink } from 'react-router-dom';

class SideNav extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div className="navbar-default navbar-side" >
            <div className="sidebar-collapse">
                <ul className="nav">
                    <li>
                        <NavLink exact activeClassName="active-menu" to="/">
                            <i className="fa fa-home "></i> 
                            <span>首页</span> 
                         </NavLink>
                    </li>
                    <li className="active">
                        <Link to="/product">
                            <i className="fa fa-shopping-bag"></i> 
                            <span>商品</span> 
                            <span className="fa arrow"></span>
                        </Link>
                             <ul className="nav nav-second-level collapse in">
                                <li>
                                    <NavLink activeClassName="active-menu" to="/product/index">商品管理</NavLink>
                                </li>
                                <li>
                                    <NavLink activeClassName="active-menu" to="/category/index">品类管理</NavLink>
                               </li>
                            </ul>             
                    </li>
                    <li className="active">
                        <Link to="/order">
                            <i className="fa fa-sitemap"></i> 
                            <span>订单</span> 
                            <span className="fa arrow"></span>
                        </Link>
                        <ul className="nav nav-second-level collapse in">
                            <li>
                                <NavLink activeClassName="active-menu" to="/order/index">订单管理</NavLink>
                            </li>
                        </ul>
                    </li>
                    <li className="active">
                        <Link to="/user" >
                            <i className="fa fa-user-circle-o "></i> 
                            <span>用户</span> 
                            <span className="fa arrow"></span>
                        </Link>
                        <ul className="nav nav-second-level collapse in">
                            <li>
                                <NavLink to="/user/index" activeClassName="active-menu" >用户管理</NavLink>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    )
  }
}
export default SideNav;